<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

let map;
export default {
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  // 当组件销毁的时候，不要忘记去销毁地图实例
  beforeUnmount() {
    map.destroy();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "deed9add616b56bc1bc1f0bf3ac66413", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          map = new AMap.Map("container", {
            //设置地图容器id
            // viewMode: "3D", //是否为3D地图模式
            zoom: 15, //初始化地图级别,放大比例 3-20
            center: [120.26408, 30.305451], //初始化地图中心点位置
          });

          // 添加卫星图层
          // const satellite = new AMap.TileLayer.Satellite();
          // map.add(satellite);
          // 交通图层
          // const roadNet = new AMap.TileLayer.Traffic();
          // map.add(roadNet);

          // 生成标记实例
          const marker = new AMap.Marker({
            position: new AMap.LngLat(120.26408, 30.305451), // 标准写法
            // position: [120.26408, 30.305451], // 位置，简写
            title: "旺田商务楼",
            icon: "https://vdata.amap.com/icons/b18/1/2.png",
            offset: new AMap.Pixel(-10, -10),
          });
          // map.add(marker); //添加到地图
          const marker2 = new AMap.Marker({
            position: new AMap.LngLat(120.234606, 30.355786), // 标准写法
            // position: [120.26408, 30.305451], // 位置，简写
          });
          // map.add(marker2);
          // 可以用数组的方式同时添加多个点标记
          map.add([marker, marker2]);

          // marker.on("click", (e) => {
          //   console.log("你点击了旺田商务楼", e);
          // });
          map.on("click", (e) => {
            const { lng, lat } = e.lnglat;
            const marker = new AMap.Marker({
              position: [lng, lat],
            });
            map.add(marker);
          });

          // marker.on("click", onMarkerClick); // 绑定 click 事件
          // console.log(
          //   new AMap.LngLat(120.26408, 30.305451).distance(
          //     new AMap.LngLat(116.397455, 39.909187)
          //   )
          // );

          // 生成一个圆形实例
          var circle = new AMap.Circle({
            center: [120.26408, 30.305451], //圆心
            radius: 1500, //半径
            borderWeight: 3,
            strokeColor: "#FF33FF",
            strokeOpacity: 1,
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillOpacity: 0.4,
            strokeStyle: "dashed",
            strokeDasharray: [10, 10],
            // 线样式还支持 'dashed'
            fillColor: "#1791fc",
            zIndex: 50,
          });
          map.add(circle);

          // 生成折线
          const lineArr = [
            [120.26408, 30.305451],
            [120.266387, 30.305985],
            [120.266548, 30.310444],
            [120.278821, 30.310435],
          ];
          const polyline = new AMap.Polyline({
            path: lineArr, // 设置线覆盖物路径
            strokeColor: "#3366FF", // 线颜色
            strokeWeight: 5, // 线宽
            strokeStyle: "solid", // 线样式
          });
          map.add(polyline);

          AMap.plugin("AMap.ToolBar", function () {
            //异步加载插件
            var toolbar = new AMap.ToolBar();
            map.addControl(toolbar);
          });
          AMap.plugin("AMap.Scale", function () {
            //异步加载插件
            var scale = new AMap.Scale();
            map.addControl(scale);
          });

          // 自动用一个合适的比例将所有的内容全部放到可视区范围内
          map.setFitView();

          map.on("complete", function () {
            // 地图图块加载完成后触发
            console.log("地图加载完成了");
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 500px;
}
</style>
